import 'package:flustars/flustars.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:ost_flutter_module/class/store/course_detail_page/bloc/course_detail_page_bloc.dart';
import 'package:ost_flutter_module/class/store/shop_cart/widgets/shop_cart_red_dot.dart';
import 'package:ost_flutter_module/common/color.dart';
import 'package:ost_flutter_module/common/utils.dart';
import 'package:ost_flutter_module/help/ost_route.dart';
import 'package:ost_flutter_module/widget/custom_widget/image_text_button.dart';

class StoreCourseDetailPageBottomNavigationBar extends StatefulWidget {
  @override
  _StoreCourseDetailPageBottomNavigationBarState createState() =>
      _StoreCourseDetailPageBottomNavigationBarState();
}

class _StoreCourseDetailPageBottomNavigationBarState
    extends State<StoreCourseDetailPageBottomNavigationBar> {
  int _counter = 0;
  GlobalKey _cartKey = GlobalKey();
  GlobalKey _addCartKey = GlobalKey();

  Offset _cartOffset;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      RenderBox renderBox = _cartKey.currentContext.findRenderObject();
      _cartOffset = renderBox.localToGlobal(Offset.zero);
      var width = ScreenUtil.getScreenW(context);
      _cartOffset = Offset(_cartOffset.dx + width / 12, _cartOffset.dy);
    });
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CourseDetailPageBloc, CourseDetailPageState>(
        builder: (context, state) {
      return BottomAppBar(
        color: Colors.white,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              flex: 1,
              child: GImageTextButton(
                '咨询',
                svg: Utils.svgAssets('icon_detail_consule'),
                textLeadingPadding: 0,
                borderRadius: 0,
                padding: 0,
                height: 60,
                style: ImageTextStyle.imageTop,
                textStyle: TextStyle(color: color42270C, fontSize: 10),
              ),
            ),
            Expanded(
              flex: 1,
              child: GImageTextButton(
                '购物车',
                key: _cartKey,
                svg: Utils.svgAssets('icon_detail_shop_cart'),
                textLeadingPadding: 0,
                borderRadius: 0,
                padding: 0,
                height: 60,
                style: ImageTextStyle.imageTop,
                textStyle: TextStyle(color: color42270C, fontSize: 10),
                onTap: (_) => _onTap(context, tag: 1),
              ),
            ),
            Expanded(
              flex: 2,
              child: GImageTextButton(
                '加入购物车',
                key: _addCartKey,
                borderRadius: 0,
                padding: 0,
                height: 60,
                backgroundColor: colorFACD33,
                textStyle: TextStyle(color: color42270C, fontSize: 16),
                onTap: (_) => _onTap(context, tag: 2),
              ),
            ),
            Expanded(
              flex: 2,
              child: GImageTextButton(
                '立即报名',
                borderRadius: 0,
                padding: 0,
                height: 60,
                backgroundColor: colorFF879D,
                textStyle: TextStyle(color: Colors.white, fontSize: 16),
                onTap: (_) => _onTap(context, tag: 3),
              ),
            ),
          ],
        ),
      );
    });
  }

  void _onTap(BuildContext context, {int tag}) {
    if (tag == 1) Navigator.pushNamed(context, GRouter.shop_cart);
    if (tag == 2) _shopCartAnimation(context);
    if (tag == 3) Navigator.pushNamed(context, GRouter.order_page);
  }

  void _shopCartAnimation(BuildContext context) {
    RenderBox box = _addCartKey.currentContext.findRenderObject();
    var _addCartOffset = box.localToGlobal(Offset.zero);

    var width = ScreenUtil.getScreenW(context);
    _addCartOffset = Offset(_addCartOffset.dx + width / 6, _addCartOffset.dy);

    OverlayEntry entry = OverlayEntry(builder: (_) {
      return RedDotPage(
        startPosition: _addCartOffset,
        endPosition: _cartOffset,
      );
    });

    Future.delayed(Duration(milliseconds: 500), () {
      entry.remove();
      entry = null;
    });

    Overlay.of(context).insert(entry);
  }
}
